<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link type="text/css" rel="stylesheet" href="css/material-icons.css"/>
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
    <title>Compute Pools</title>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
        nav.clean {
            background: none;
            box-shadow: none;
        }

        .breadcrumb:before {
            color: rgba(0, 0, 0, 0.7);
        }

        .breadcrumb, .breadcrumb:last-child {
            color: rgba(0, 0, 0, 1);
        }
    </style>
</head>

<body>

<div class="container">
    <div class="section">
        <nav class="clean">
            <div class="nav-wrapper">
                <div class="col s12">
                    <a href="#" class="breadcrumb" id="title-caption"></a>
                </div>
            </div>
        </nav>
    </div>
    <div class="divider"></div>
    <div class="section">
        <div class="row">
            <div class="col m3">
                <a class="waves-effect waves-light blue-grey lighten-2 btn" href="create_pool.html" id="create-caption"><i class="material-icons left">add</i></a>
            </div>
        </div>
    </div>
    <div class="section" id="pool_list">
    </div>
    <div class="modal" id="modal_confirm">
        <div class="modal-content">
            <h4>Delete Confirm</h4>
            <p id="confirm_content"></p>
        </div>
        <div class="modal-footer">
            <a href="#" class="modal-close waves-effect waves-green btn-flat">No</a>
            <a href="#" class="modal-close waves-effect waves-green btn-flat" id="confirm_link">Yes</a>
        </div>
    </div>
</div>

<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/materialize.min.js"></script>
<script type="text/javascript" src="js/nano.js"></script>
<script>
    N.ValidateSession();
    var texts = N.GetTexts();
    $('#title-caption').text(texts.get(N.TagComputePool));
    $('#create-caption').append(texts.get(N.TagAdd));
    $('.modal-footer > a:first-child').text(texts.get(N.TagCancel));
    $('.modal-footer > a:last-child').text(texts.get(N.TagConfirm));

    M.AutoInit();
    function refresh(){
      loadPools();
    }

    function outputMessage(message){
      $('#pool_list').empty().append(
        $('<div>').addClass('center').append(
          $('<span>').text(message)
        )
      );
    }

    function loadPools(){
      $.getJSON(
        '/compute_pools/',
        function(result){
          if (0 != result['error_code']) {
            outputMessage(result['message']);
            return;
          }
          if (!result['data']){
            outputMessage('no compute pool available');
            return
          }
          if (0 == result['data'].length){
            outputMessage('no compute pool available');
            return;
          }
          var container = $('<div>').addClass('row');
          var table = $('<table>').append(
            $('<thead>').append(
              $('<tr>').append(
                $('<td>').text(texts.get(N.TagComputePool)).prepend(
                  $('<i>').addClass('material-icons blue-gray-text darken-2').text('blur_on')
                )
              ).append(
                $('<td>').text(texts.get(N.TagCell)).prepend(
                  $('<i>').addClass('material-icons blue-gray-text darken-2').text('view_quilt')
                )
              ).append(
                $('<td>').text(texts.get(N.TagNetwork)).prepend(
                  $('<i>').addClass('material-icons blue-gray-text darken-2').text('share')
                )
              ).append(
                $('<td>').text(texts.get(N.TagStorage)).prepend(
                  $('<i>').addClass('material-icons blue-gray-text darken-2').text('storage')
                )
              ).append(
                $('<td>').text(texts.get(N.TagFailover))
              ).append(
                $('<td>').text(texts.get(N.TagStatus))
              ).append($('<td>'))
            )
          );
          result['data'].forEach((pool) => {
            var content = $('<tr>');
            var storage = pool['storage'];
            if (!storage){
              storage = texts.get(N.TagLocalStorage);
            }
            content.append(
              $('<td>').text(pool['name'])
            ).append(
              $('<td>').text(pool['cells'])
            ).append(
              $('<td>').text(pool['network'])
            ).append(
              $('<td>').text(storage)
            );
            var operators = $('<td>');
            if (pool['failover']){
              //failover enabled
              content.append(
                $('<td>').append(
                  $('<i>').addClass('material-icons green-text darken-2 tooltipped').attr('data-position', 'top').
                    attr('data-tooltip', texts.get(N.TagEnable)).text('autorenew')
                )
              );
            }else{
              content.append($('<td>'));
            }
            //Status
            if (pool['enabled']){
              content.append(
                $('<td>').append(
                  $('<i>').addClass('material-icons green-text darken-2 tooltipped').attr('data-position', 'top').
                    attr('data-tooltip', texts.get(N.TagEnable)).text('check')
                )
              );
              operators.append(
                $('<a>').attr('href', '#').addClass('blue-grey-text tooltipped').attr('data-position', 'bottom').
                  attr('data-tooltip', texts.get(N.TagDisable)).append(
                    $('<i>').addClass('material-icons').text('do_not_disturb')
                  )
              );
            }else{
              content.append(
                $('<td>').append(
                  $('<i>').addClass('material-icons red-text darken-4 tooltipped').attr('data-position', 'top').
                    attr('data-tooltip', texts.get(N.TagDisable)).text('do_not_disturb')
                )
              );
              operators.append(
                $('<a>').attr('href', '#').addClass('blue-grey-text tooltipped').attr('data-position', 'bottom').
                  attr('data-tooltip', texts.get(N.TagEnable)).append(
                    $('<i>').addClass('material-icons').text('check')
                  )
              );
            }
            operators.append(
              $('<a>').attr('href', '/compute_cells.html?pool=' + pool['name']).addClass('blue-grey-text tooltipped').attr('data-position', 'bottom').
                attr('data-tooltip', texts.get(N.TagCell)).append(
                  $('<i>').addClass('material-icons').text('view_quilt')
                )
            );
            operators.append(
              $('<a>').attr('href', '/instance_list.html?pool=' + pool['name']).addClass('blue-grey-text tooltipped').attr('data-position', 'bottom').
                attr('data-tooltip', texts.get(N.TagInstance)).append(
                  $('<i>').addClass('material-icons').text('cloud_queue')
                )
            );
            operators.append(
              $('<a>').attr('href', '#').addClass('blue-grey-text tooltipped').attr('data-position', 'bottom').
                attr('data-tooltip', texts.get(N.TagModify)).attr('href', 'modify_pool.html?pool=' + pool['name']).append(
                  $('<i>').addClass('material-icons').text('build')
                )
            );
            operators.append(
              $('<a>').attr('href', '#').addClass('blue-grey-text tooltipped').attr('data-position', 'bottom').
                attr('data-tooltip', texts.get(N.TagDelete)).attr('onclick', 'confirmDelete("'+ pool['name'] +'")').append(
                  $('<i>').addClass('material-icons').text('delete')
                )
            );
            content.append(operators);
            container.append(
              table.append(content)
            );
          });
          $('#pool_list').empty().append(container);
          $('.material-tooltip').remove();
          M.Tooltip.init($('.tooltipped'));
        }
      );
    }

    function confirmDelete(name){
      $('#confirm_content').text('Are you sure to delete compute pool ' + name);
      $('#confirm_link').attr('onclick', 'deletePool("' + name + '")');
      var instance = M.Modal.getInstance($('#modal_confirm'));
      instance.open();
    }

    function deletePool(name) {
      $.ajax({
       url:'/compute_pools/' + name,
       type: "DELETE",
       dataType: "json",
       success: function (result) {
           if (0 != result['error_code']) {
               M.toast({html: 'delete pool fail: ' + result['message'], outDuration: 1000});
               return;
           }
           M.toast({html: 'compute pool "' + name + '" deleted'});
           setTimeout(refresh, 500);
           N.WriteOperateLog('delete compute pool ' + name);
       }
      });
    }

    $(function(){
      M.Modal.init($('.modal'));
      loadPools();
    });

</script>
</body>
</html>
